<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/montage-serialization">{
        "owner": {
            "values": {
                "element": {"#": "owner"}
            }
        },

        "title": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "title"},
                "value": "Title"
            }
        },

        "list": {
            "prototype": "montage/ui/repetition.reel",
            "values": {
                "element": {"#": "list"}
            }
        },

        "item": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "item"}
            }
        },

        "rows": {
            "prototype": "montage/ui/repetition.reel",
            "values": {
                "element": {"#": "rows"}
            }
        },

        "row": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "row"}
            }
        },

        "columns": {
            "prototype": "montage/ui/repetition.reel",
            "values": {
                "element": {"#": "columns"}
            }
        },

        "column": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "column"}
            }
        }
    }</script>
</head>
<body>
    <div data-montage-id="owner">

        <!-- single element -->
        <h1 data-montage-id="title" id="title"></h1>

        <!-- simple composition -->
        <ul data-montage-id="list" id="list">
            <li>
                <span data-montage-id="item" id="item"></span>
            </li>
        </ul>

        <!-- deep composition -->
        <ul data-montage-id="rows" id="rows">
            <li>
                <span data-montage-id="row" id="row"></span>
                <ul data-montage-id="columns" id="columns">
                    <li>
                        <span data-montage-id="column" id="column"></span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>
